<template>
	<el-form :model="formData" ref="formRef" :rules="formRules" label-width="12rem">
		<el-row type="flex" :gutter="10">
			<el-col :span="24">
				<el-form-item label="门头照片(500*500)" prop="img">
					<el-upload-image v-model="formData.img" :limit="6" :title="title"
						:disabled="isdisabled"></el-upload-image>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="供应商名称" prop="nickname">
					<el-input v-model="formData.nickname" clearable placeholder="请输入供应商名称"></el-input>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="社区名称" prop="name">
					<el-input v-model="formData.name" :disabled="isdisabled" clearable placeholder="请输入社区名称"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="联系人" prop="contacts">
					<el-input v-model="formData.contacts" :disabled="isdisabled" clearable placeholder="请输入联系人"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="联系人电话" prop="mobile">
					<el-input v-model="formData.mobile" :disabled="isdisabled" clearable placeholder="请输入联系人电话"></el-input>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="标签" prop="type">
					<el-select v-model="formData.type" size="mini" multiple placeholder="请选择老师类型" 
						>
						<el-option v-for="item in typelist" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="性别" prop="sex">
					<el-select v-model="formData.sex" size="mini"   placeholder="请选择性别" 
						>
						<el-option v-for="item in sexlist" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="标签" prop="lable">
					<el-select v-model="formData.lable" size="mini" multiple placeholder="请选择标签" 
						>
						<el-option v-for="item in sexlist" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="联系电话" prop="mobile">
					<el-input v-model="formData.mobile" type="number" clearable placeholder="请输入联系电话"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="毕业学校" prop="school">
					<el-input v-model="formData.school" clearable type="number" placeholder="请输入毕业学校"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="专业" prop="major">
					<el-select v-model="formData.major" size="mini"   placeholder="请选择专业"
						>
						<el-option v-for="item in sexlist" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="生日" prop="birthday">
				    <el-date-picker
				        type="date"
				        placeholder="请选择"
				        format="yyyy-MM-dd"
				        value-format="yyyy-MM-dd"
				        v-model="formData.birthday"
				    ></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="教龄开始时间" prop="work_start">
				    <el-date-picker
				        type="date"
				        placeholder="请选择"
				        format="yyyy-MM-dd"
				        value-format="yyyy-MM-dd"
				        v-model="formData.work_start"
				    ></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="教龄结束时间" prop="work_end">
				    <el-date-picker
				        type="date"
				        placeholder="请选择"
				        format="yyyy-MM-dd"
				        value-format="yyyy-MM-dd"
				        v-model="formData.work_end"
				    ></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="入职时间" prop="entry_time">
				    <el-date-picker
				        type="date"
				        placeholder="请选择"
				        format="yyyy-MM-dd"
				        value-format="yyyy-MM-dd"
				        v-model="formData.entry_time"
				    ></el-date-picker>
				</el-form-item>
			</el-col> -->
			<el-col :span="24">
				<el-form-item label="区域" prop="area">
					<areaSelect v-model="formData.area" :isdisabled="isdisabled"></areaSelect>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="地图" prop="location">
					<maps :location.sync="formData.location" :isdisabled="isdisabled"></maps>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="社区简介" prop="content">
					<el-input :rows="10" :disabled="isdisabled" v-model="formData.content" clearable type="textarea"
						placeholder="请输入社区简介"></el-input>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
				<el-form-item label="说明" prop="desc">
					<el-input :disabled="isdisabled" v-model="formData.desc" clearable type="textarea" placeholder="请输入"></el-input>
				</el-form-item>
			</el-col> -->
			<!-- <el-col :span="12">
				<el-form-item label="教师资格证" prop="file">
					<el-upload-file
					    v-model="formData.file"
					    accept=".xls,.xlsx"
					></el-upload-file>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="其他证书" prop="other_file">
					<el-upload-file
					    v-model="formData.other_file"
					    accept=".xls,.xlsx"
					></el-upload-file>
				</el-form-item>
			</el-col> -->
			<!-- <el-col :span="24">
			    <el-form-item prop="content" label-width="0px">
			        <div style="border: 1px solid #ccc;">
			            <Toolbar
			                style="border-bottom: 1px solid #ccc"
			                :editor="editor"
			                :defaultConfig="toolbarConfig"
			                :mode="mode"
			            />
			            <Editor
			                style="height: 500px; overflow-y: auto;"
			                v-model="formData.content"
			                :defaultConfig="editorConfig"
			                :mode="mode"
			                @onCreated="onCreated"
			            />
			        </div>
			    </el-form-item>
			</el-col> -->
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" :disabled="isdisabled" icon="el-icon-check" @click="onConfirm">确认</el-button>
			<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import areaSelect from "@/components/area-select.vue";
import { post } from '@/assets/js/http'
export default {
	name: "member-search",
	props: {
		formData: {
			type: Object,
			default: () => { }
		},
		isdisabled: {
			type: Boolean,
			default: false
		}
	},
	components: {
		"el-upload-image": () => import("@/components/el-upload-image.vue"),
		"el-upload-file": () => import("@/components/el-upload-file.vue"),
		"maps": () => import("@/components/map/index.vue"),
		Editor,
		Toolbar,
		areaSelect
	},
	data() {
		return {
			editor: null,
			toolbarConfig: {},
			editorConfig: {
				MENU_CONF: {
					uploadImage: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn(
								$store.getters.baseUrl + res.data.file.url
							);
						}
					},
					uploadVideo: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token,
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn($store.getters.baseUrl + res.data.file.url)
						},
					},
				}
			},
			mode: "default",
			formRules: {
				img: [{
					required: true,
					message: '请上传',
					trigger: 'change'
				}],
				area: [
					{ required: true, message: '请选择', trigger: 'change' },
				],
				location: [{ required: true, message: '请输入', trigger: 'change' }],
				// type: [{required: true,message: '请选择',trigger: 'change'},],
				name: [{ required: true, message: '请输入', trigger: 'change' },],
				contacts: [{ required: true, message: '请输入', trigger: 'change' },],
				// lable: [{required: true,message: '请选择',trigger: 'change'},],
				mobile: [
					{
						required: true,
						message: "此项为必填项"
					},
					{
						min: 11,
						// pattern: /^0?1[3|4|5|6|7|8][0-9]\d{8}$/,
						message: "手机号格式错误",
						trigger: "blur"
					}
				],
				// school: [{required: true,message: '请输入',trigger: 'change'},],
				// major: [{required: true,message: '请选择',trigger: 'change'}],
				// birthday: [{required: true,message: '请选择',trigger: 'change'}],
				// work_start: [{required: true,message: '请选择',trigger: 'change'}],
				// work_end: [{required: true,message: '请选择',trigger: 'change'}],
				// entry_time: [{required: true,message: '请选择',trigger: 'change'}],
				// desc: [{required: true,message: '请输入',trigger: 'change'}],
				// other_file	: [{required: true,message: '请选择',trigger: 'change'}],
				content: {
					required: true,
					message: "此项为必填项"
				},
			},
			title: '请上传1:1比例的图片',
			sexlist: [{ id: 1, title: '男' }, { id: 2, title: '女' }, { id: 3, title: '保密' }],//性别1男2女3保密
			typelist: [{ id: 1, title: '全职' }, { id: 2, title: '兼职' }],//类型1全职2兼职
		};
	},
	beforeDestroy() {
		const editor = this.editor;
		if (editor == null) return;
		editor.destroy();
	},
	methods: {
		onCreated(editor) {
			this.editor = Object.seal(editor);
		},
		onConfirm() {
			this.$refs.formRef.validate(async (valid) => {
				if (valid) {
					this.formData.supplier_id = this.$store.state.id
					try {
						const info = JSON.parse(JSON.stringify(this.formData))
						info.latitude = info.location.lat
						info.longitude = info.location.lng
						this.imgs = []
						info.img.forEach(item => {
							this.imgs.push(item.url)
						})
						info.img = this.imgs.join(',')
						info.province_id = info.area[0]
						info.city_id = info.area[1]
						info.area_id = info.area[2]
						// return
						if (info.id) {
							info.status = 0//社区审核0待审核1通过2拒绝
							await post({
								url: '/admin/project.Community/edit',
								data: info,
								successTip: true,
							})
						} else {
							await post({
								url: '/admin/project.Community/add',
								data: info,
								successTip: true,
							})
						}
						this.$emit("search");
						this.$refs.formRef.resetFields()
						this.formData.location = {}
						this.formData = {}
					} catch (err) {
						console.log(err)
					}

				} else {
					return false;
				}
			});

		},
		onCancel() {
			this.$parent.$emit("update:visible", false);
			this.$refs.formRef.resetFields();
		}
	}
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
